<template>
  <el-container>
    <el-card class="box-card"
      ><el-container style="margin-left: 30px"
        ><el-aside>
          <el-card style="background: #2d2e36">
            <template #header>
              <div class="card-header">
                <el-avatar
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                />
                <el-button link color="red"
                  ><el-icon><Avatar /></el-icon>个人主页</el-button
                >
              </div>
            </template>
            <!-- 左侧 -->
            <el-scrollbar height="650px"> </el-scrollbar>
          </el-card> </el-aside
        ><el-main>
          <!-- 主内容部分 --><el-tabs style="width: 100%">
            <!-- 别人创建的项目 -->
            <el-tab-pane label="...创建的项目" name="first"
              ><el-empty description="目前没有打开的项目" />
            </el-tab-pane>
            <!-- 别人加入的项目 -->
            <el-tab-pane label="...加入的的项目" name="second"
              ><el-empty description="目前没有打开的项目" />
            </el-tab-pane>
            <!-- 个人信息 -->
            <el-tab-pane label="个人信息" name="third">
              <el-descriptions
                class="margin-top"
                title="个人信息"
                :column="2"
                size="large"
                border
              >
                <template #extra> </template>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <el-icon :style="iconStyle">
                        <user />
                      </el-icon>
                      用户名
                    </div>
                  </template>
                  kooriookami
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <el-icon :style="iconStyle">
                        <User />
                      </el-icon>
                      真实姓名
                    </div>
                  </template>
                  缪尔赛思
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <el-icon :style="iconStyle">
                        <Clock />
                      </el-icon>
                      年龄
                    </div>
                  </template>
                  18
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <el-icon :style="iconStyle">
                        <iphone />
                      </el-icon>
                      电话
                    </div>
                  </template>
                  18100000000
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <el-icon :style="iconStyle">
                        <location />
                      </el-icon>
                      邮箱
                    </div>
                  </template>
                  12412412947@qq.com
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <el-icon :style="iconStyle">
                        <location />
                      </el-icon>
                      qq号
                    </div>
                  </template>
                  12312414
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <el-icon :style="iconStyle">
                        <location />
                      </el-icon>
                      年级
                    </div>
                  </template>
                  学前班
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <el-icon :style="iconStyle">
                        <tickets />
                      </el-icon>
                      总项目数
                    </div>
                  </template>
                  <el-tag size="small">3</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <el-icon :style="iconStyle">
                        <ChatDotRound />
                      </el-icon>
                      个人介绍
                    </div>
                  </template>
                  No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
                  No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
                  No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
                  No.1188, Wuzhong Avenue, Wuzhong District, Suzhou,
                  JiangsuNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou,
                  Jiangsu
                </el-descriptions-item>
              </el-descriptions></el-tab-pane
            >
          </el-tabs></el-main
        ></el-container
      >
    </el-card>
  </el-container>
</template>

<style lang="scss" scoped>
.child-div {
  position: absolute;
  left: 0%;
  width: 100%;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-container {
  height: 100%;
  max-width: 1280px;
  margin: 20px auto;
  border: 1px solid var(--el-card-border-color);
  box-shadow: #000000;
}

/* 左边框 */
.el-aside {
  height: 100%;
  width: 20%;
}
.box-card {
  height: 99%;
  width: 100%;
  padding: 5px;
  background-color: #fafafa;
}
.el-card ::v-deep .el-card__body {
  --el-card-border-color: null;
  padding: 0;
  height: 100%;
}
::v-deep .el-collapse-item__header {
  background-color: #2d2e36;
}
::v-deep .el-collapse-item__arrow {
  color: #fafafa;
}

.el-collapse {
  --el-collapse-border-color: 0;
}
.item {
  height: 40px;
  background-color: #fafafa;
}
.button {
  width: 100%;
  height: 100%;
  background-color: #14151e;
  border-radius: 0%;
}
::v-deep .el-collapse-item__content {
  background-color: #fafafa;
  padding: 0;
}
/* 主体内容 */
.el-main {
  position: relative;
  width: 100%;
  margin-left: 20px;
}
.el-tabs {
  width: 80%;
}
::v-deep .el-tabs__content {
  height: 100%;
  width: 100%;
}
::v-deep .el-empty {
  margin-right: 40%;
  margin-top: 15%;
}
.margin-top {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
  width: 80px;
}
.el-descriptions {
  margin-top: 20px;
}
/* 消息页面 */
.msgBtn {
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: left;
  height: 40px;
  margin: 10px;
  text-align: center;
  border-radius: 20px;
  background: var(--el-color-info-light-9);
  color: var(--el-color-info);
}
</style>
